import { memo, useMemo, useEffect } from "react";
import { ThemeProvider } from "styled-components";
import { EditorEngine } from "../../classes";
import { WorkflowEditorStoreContext } from "../../contexts";
import { INodeMaterial, IMaterialUIs } from "../../interfaces";
import { useTranslate } from "../../react-locales";
import { IThemeToken } from "../../theme";
import { defaultMaterials } from "../defaultMaterials";

export const FlowEditorScopeInner = memo(
  (props: {
    mode?: "dark" | "light"; //皮肤
    themeToken?: IThemeToken;
    children?: React.ReactNode;
    materials?: INodeMaterial[]; // dlc  理解成可添加的节点信息
    materialUis?: IMaterialUIs; // dlc 节点物料map
  }) => {
    const { mode, children, themeToken, materials, materialUis } = props;
    // const [, token] = useToken();
    const t = useTranslate();
    const theme: { token: IThemeToken; mode?: "dark" | "light" } = useMemo(() => {
      return {
        token: themeToken || {
          blue: "#1677ff",
          purple: "#722ED1",
          cyan: "#13C2C2",
          green: "#52C41A",
          magenta: "#EB2F96",
          pink: "#eb2f96",
          red: "#F5222D",
          orange: "#FA8C16",
          yellow: "#FADB14",
          volcano: "#FA541C",
          geekblue: "#2F54EB",
          gold: "#FAAD14",
          lime: "#A0D911",
          colorPrimary: "#1677ff",
          colorSuccess: "#52c41a",
          colorWarning: "#faad14",
          colorError: "#ff4d4f",
          colorInfo: "#1677ff",
          colorLink: "#1677ff",
          colorTextBase: "#000",
          colorBgBase: "#fff",
          fontFamily:
            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n'Noto Color Emoji'",
          fontFamilyCode: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
          fontSize: 14,
          lineWidth: 1,
          lineType: "solid",
          motionUnit: 0.1,
          motionBase: 0,
          motionEaseOutCirc: "cubic-bezier(0.08, 0.82, 0.17, 1)",
          motionEaseInOutCirc: "cubic-bezier(0.78, 0.14, 0.15, 0.86)",
          motionEaseOut: "cubic-bezier(0.215, 0.61, 0.355, 1)",
          motionEaseInOut: "cubic-bezier(0.645, 0.045, 0.355, 1)",
          motionEaseOutBack: "cubic-bezier(0.12, 0.4, 0.29, 1.46)",
          motionEaseInBack: "cubic-bezier(0.71, -0.46, 0.88, 0.6)",
          motionEaseInQuint: "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
          motionEaseOutQuint: "cubic-bezier(0.23, 1, 0.32, 1)",
          borderRadius: 6,
          sizeUnit: 4,
          sizeStep: 4,
          sizePopupArrow: 16,
          controlHeight: 32,
          zIndexBase: 0,
          zIndexPopupBase: 1000,
          opacityImage: 1,
          wireframe: false,
          motion: true,
          "blue-1": "#e6f4ff",
          blue1: "#e6f4ff",
          "blue-2": "#bae0ff",
          blue2: "#bae0ff",
          "blue-3": "#91caff",
          blue3: "#91caff",
          "blue-4": "#69b1ff",
          blue4: "#69b1ff",
          "blue-5": "#4096ff",
          blue5: "#4096ff",
          "blue-6": "#1677ff",
          blue6: "#1677ff",
          "blue-7": "#0958d9",
          blue7: "#0958d9",
          "blue-8": "#003eb3",
          blue8: "#003eb3",
          "blue-9": "#002c8c",
          blue9: "#002c8c",
          "blue-10": "#001d66",
          blue10: "#001d66",
          "purple-1": "#f9f0ff",
          purple1: "#f9f0ff",
          "purple-2": "#efdbff",
          purple2: "#efdbff",
          "purple-3": "#d3adf7",
          purple3: "#d3adf7",
          "purple-4": "#b37feb",
          purple4: "#b37feb",
          "purple-5": "#9254de",
          purple5: "#9254de",
          "purple-6": "#722ed1",
          purple6: "#722ed1",
          "purple-7": "#531dab",
          purple7: "#531dab",
          "purple-8": "#391085",
          purple8: "#391085",
          "purple-9": "#22075e",
          purple9: "#22075e",
          "purple-10": "#120338",
          purple10: "#120338",
          "cyan-1": "#e6fffb",
          cyan1: "#e6fffb",
          "cyan-2": "#b5f5ec",
          cyan2: "#b5f5ec",
          "cyan-3": "#87e8de",
          cyan3: "#87e8de",
          "cyan-4": "#5cdbd3",
          cyan4: "#5cdbd3",
          "cyan-5": "#36cfc9",
          cyan5: "#36cfc9",
          "cyan-6": "#13c2c2",
          cyan6: "#13c2c2",
          "cyan-7": "#08979c",
          cyan7: "#08979c",
          "cyan-8": "#006d75",
          cyan8: "#006d75",
          "cyan-9": "#00474f",
          cyan9: "#00474f",
          "cyan-10": "#002329",
          cyan10: "#002329",
          "green-1": "#f6ffed",
          green1: "#f6ffed",
          "green-2": "#d9f7be",
          green2: "#d9f7be",
          "green-3": "#b7eb8f",
          green3: "#b7eb8f",
          "green-4": "#95de64",
          green4: "#95de64",
          "green-5": "#73d13d",
          green5: "#73d13d",
          "green-6": "#52c41a",
          green6: "#52c41a",
          "green-7": "#389e0d",
          green7: "#389e0d",
          "green-8": "#237804",
          green8: "#237804",
          "green-9": "#135200",
          green9: "#135200",
          "green-10": "#092b00",
          green10: "#092b00",
          "magenta-1": "#fff0f6",
          magenta1: "#fff0f6",
          "magenta-2": "#ffd6e7",
          magenta2: "#ffd6e7",
          "magenta-3": "#ffadd2",
          magenta3: "#ffadd2",
          "magenta-4": "#ff85c0",
          magenta4: "#ff85c0",
          "magenta-5": "#f759ab",
          magenta5: "#f759ab",
          "magenta-6": "#eb2f96",
          magenta6: "#eb2f96",
          "magenta-7": "#c41d7f",
          magenta7: "#c41d7f",
          "magenta-8": "#9e1068",
          magenta8: "#9e1068",
          "magenta-9": "#780650",
          magenta9: "#780650",
          "magenta-10": "#520339",
          magenta10: "#520339",
          "pink-1": "#fff0f6",
          pink1: "#fff0f6",
          "pink-2": "#ffd6e7",
          pink2: "#ffd6e7",
          "pink-3": "#ffadd2",
          pink3: "#ffadd2",
          "pink-4": "#ff85c0",
          pink4: "#ff85c0",
          "pink-5": "#f759ab",
          pink5: "#f759ab",
          "pink-6": "#eb2f96",
          pink6: "#eb2f96",
          "pink-7": "#c41d7f",
          pink7: "#c41d7f",
          "pink-8": "#9e1068",
          pink8: "#9e1068",
          "pink-9": "#780650",
          pink9: "#780650",
          "pink-10": "#520339",
          pink10: "#520339",
          "red-1": "#fff1f0",
          red1: "#fff1f0",
          "red-2": "#ffccc7",
          red2: "#ffccc7",
          "red-3": "#ffa39e",
          red3: "#ffa39e",
          "red-4": "#ff7875",
          red4: "#ff7875",
          "red-5": "#ff4d4f",
          red5: "#ff4d4f",
          "red-6": "#f5222d",
          red6: "#f5222d",
          "red-7": "#cf1322",
          red7: "#cf1322",
          "red-8": "#a8071a",
          red8: "#a8071a",
          "red-9": "#820014",
          red9: "#820014",
          "red-10": "#5c0011",
          red10: "#5c0011",
          "orange-1": "#fff7e6",
          orange1: "#fff7e6",
          "orange-2": "#ffe7ba",
          orange2: "#ffe7ba",
          "orange-3": "#ffd591",
          orange3: "#ffd591",
          "orange-4": "#ffc069",
          orange4: "#ffc069",
          "orange-5": "#ffa940",
          orange5: "#ffa940",
          "orange-6": "#fa8c16",
          orange6: "#fa8c16",
          "orange-7": "#d46b08",
          orange7: "#d46b08",
          "orange-8": "#ad4e00",
          orange8: "#ad4e00",
          "orange-9": "#873800",
          orange9: "#873800",
          "orange-10": "#612500",
          orange10: "#612500",
          "yellow-1": "#feffe6",
          yellow1: "#feffe6",
          "yellow-2": "#ffffb8",
          yellow2: "#ffffb8",
          "yellow-3": "#fffb8f",
          yellow3: "#fffb8f",
          "yellow-4": "#fff566",
          yellow4: "#fff566",
          "yellow-5": "#ffec3d",
          yellow5: "#ffec3d",
          "yellow-6": "#fadb14",
          yellow6: "#fadb14",
          "yellow-7": "#d4b106",
          yellow7: "#d4b106",
          "yellow-8": "#ad8b00",
          yellow8: "#ad8b00",
          "yellow-9": "#876800",
          yellow9: "#876800",
          "yellow-10": "#614700",
          yellow10: "#614700",
          "volcano-1": "#fff2e8",
          volcano1: "#fff2e8",
          "volcano-2": "#ffd8bf",
          volcano2: "#ffd8bf",
          "volcano-3": "#ffbb96",
          volcano3: "#ffbb96",
          "volcano-4": "#ff9c6e",
          volcano4: "#ff9c6e",
          "volcano-5": "#ff7a45",
          volcano5: "#ff7a45",
          "volcano-6": "#fa541c",
          volcano6: "#fa541c",
          "volcano-7": "#d4380d",
          volcano7: "#d4380d",
          "volcano-8": "#ad2102",
          volcano8: "#ad2102",
          "volcano-9": "#871400",
          volcano9: "#871400",
          "volcano-10": "#610b00",
          volcano10: "#610b00",
          "geekblue-1": "#f0f5ff",
          geekblue1: "#f0f5ff",
          "geekblue-2": "#d6e4ff",
          geekblue2: "#d6e4ff",
          "geekblue-3": "#adc6ff",
          geekblue3: "#adc6ff",
          "geekblue-4": "#85a5ff",
          geekblue4: "#85a5ff",
          "geekblue-5": "#597ef7",
          geekblue5: "#597ef7",
          "geekblue-6": "#2f54eb",
          geekblue6: "#2f54eb",
          "geekblue-7": "#1d39c4",
          geekblue7: "#1d39c4",
          "geekblue-8": "#10239e",
          geekblue8: "#10239e",
          "geekblue-9": "#061178",
          geekblue9: "#061178",
          "geekblue-10": "#030852",
          geekblue10: "#030852",
          "gold-1": "#fffbe6",
          gold1: "#fffbe6",
          "gold-2": "#fff1b8",
          gold2: "#fff1b8",
          "gold-3": "#ffe58f",
          gold3: "#ffe58f",
          "gold-4": "#ffd666",
          gold4: "#ffd666",
          "gold-5": "#ffc53d",
          gold5: "#ffc53d",
          "gold-6": "#faad14",
          gold6: "#faad14",
          "gold-7": "#d48806",
          gold7: "#d48806",
          "gold-8": "#ad6800",
          gold8: "#ad6800",
          "gold-9": "#874d00",
          gold9: "#874d00",
          "gold-10": "#613400",
          gold10: "#613400",
          "lime-1": "#fcffe6",
          lime1: "#fcffe6",
          "lime-2": "#f4ffb8",
          lime2: "#f4ffb8",
          "lime-3": "#eaff8f",
          lime3: "#eaff8f",
          "lime-4": "#d3f261",
          lime4: "#d3f261",
          "lime-5": "#bae637",
          lime5: "#bae637",
          "lime-6": "#a0d911",
          lime6: "#a0d911",
          "lime-7": "#7cb305",
          lime7: "#7cb305",
          "lime-8": "#5b8c00",
          lime8: "#5b8c00",
          "lime-9": "#3f6600",
          lime9: "#3f6600",
          "lime-10": "#254000",
          lime10: "#254000",
          colorText: "rgba(0, 0, 0, 0.88)",
          colorTextSecondary: "rgba(0, 0, 0, 0.65)",
          colorTextTertiary: "rgba(0, 0, 0, 0.45)",
          colorTextQuaternary: "rgba(0, 0, 0, 0.25)",
          colorFill: "rgba(0, 0, 0, 0.15)",
          colorFillSecondary: "rgba(0, 0, 0, 0.06)",
          colorFillTertiary: "rgba(0, 0, 0, 0.04)",
          colorFillQuaternary: "rgba(0, 0, 0, 0.02)",
          colorBgLayout: "#f5f5f5",
          colorBgContainer: "#ffffff",
          colorBgElevated: "#ffffff",
          colorBgSpotlight: "rgba(0, 0, 0, 0.85)",
          colorBgBlur: "transparent",
          colorBorder: "#d9d9d9",
          colorBorderSecondary: "#f0f0f0",
          colorPrimaryBg: "#e6f4ff",
          colorPrimaryBgHover: "#bae0ff",
          colorPrimaryBorder: "#91caff",
          colorPrimaryBorderHover: "#69b1ff",
          colorPrimaryHover: "#4096ff",
          colorPrimaryActive: "#0958d9",
          colorPrimaryTextHover: "#4096ff",
          colorPrimaryText: "#1677ff",
          colorPrimaryTextActive: "#0958d9",
          colorSuccessBg: "#f6ffed",
          colorSuccessBgHover: "#d9f7be",
          colorSuccessBorder: "#b7eb8f",
          colorSuccessBorderHover: "#95de64",
          colorSuccessHover: "#95de64",
          colorSuccessActive: "#389e0d",
          colorSuccessTextHover: "#73d13d",
          colorSuccessText: "#52c41a",
          colorSuccessTextActive: "#389e0d",
          colorErrorBg: "#fff2f0",
          colorErrorBgHover: "#fff1f0",
          colorErrorBorder: "#ffccc7",
          colorErrorBorderHover: "#ffa39e",
          colorErrorHover: "#ff7875",
          colorErrorActive: "#d9363e",
          colorErrorTextHover: "#ff7875",
          colorErrorText: "#ff4d4f",
          colorErrorTextActive: "#d9363e",
          colorWarningBg: "#fffbe6",
          colorWarningBgHover: "#fff1b8",
          colorWarningBorder: "#ffe58f",
          colorWarningBorderHover: "#ffd666",
          colorWarningHover: "#ffd666",
          colorWarningActive: "#d48806",
          colorWarningTextHover: "#ffc53d",
          colorWarningText: "#faad14",
          colorWarningTextActive: "#d48806",
          colorInfoBg: "#e6f4ff",
          colorInfoBgHover: "#bae0ff",
          colorInfoBorder: "#91caff",
          colorInfoBorderHover: "#69b1ff",
          colorInfoHover: "#69b1ff",
          colorInfoActive: "#0958d9",
          colorInfoTextHover: "#4096ff",
          colorInfoText: "#1677ff",
          colorInfoTextActive: "#0958d9",
          colorLinkHover: "#69b1ff",
          colorLinkActive: "#0958d9",
          colorBgMask: "rgba(0, 0, 0, 0.45)",
          colorWhite: "#fff",
          fontSizeSM: 12,
          fontSizeLG: 16,
          fontSizeXL: 20,
          fontSizeHeading1: 38,
          fontSizeHeading2: 30,
          fontSizeHeading3: 24,
          fontSizeHeading4: 20,
          fontSizeHeading5: 16,
          lineHeight: 1.5714285714285714,
          lineHeightLG: 1.5,
          lineHeightSM: 1.6666666666666667,
          fontHeight: 22,
          fontHeightLG: 24,
          fontHeightSM: 20,
          lineHeightHeading1: 1.2105263157894737,
          lineHeightHeading2: 1.2666666666666666,
          lineHeightHeading3: 1.3333333333333333,
          lineHeightHeading4: 1.4,
          lineHeightHeading5: 1.5,
          sizeXXL: 48,
          sizeXL: 32,
          sizeLG: 24,
          sizeMD: 20,
          sizeMS: 16,
          size: 16,
          sizeSM: 12,
          sizeXS: 8,
          sizeXXS: 4,
          controlHeightSM: 24,
          controlHeightXS: 16,
          controlHeightLG: 40,
          motionDurationFast: "0.1s",
          motionDurationMid: "0.2s",
          motionDurationSlow: "0.3s",
          lineWidthBold: 2,
          borderRadiusXS: 2,
          borderRadiusSM: 4,
          borderRadiusLG: 8,
          borderRadiusOuter: 4,
          colorFillContent: "rgba(0, 0, 0, 0.06)",
          colorFillContentHover: "rgba(0, 0, 0, 0.15)",
          colorFillAlter: "rgba(0, 0, 0, 0.02)",
          colorBgContainerDisabled: "rgba(0, 0, 0, 0.04)",
          colorBorderBg: "#ffffff",
          colorSplit: "rgba(5, 5, 5, 0.06)",
          colorTextPlaceholder: "rgba(0, 0, 0, 0.25)",
          colorTextDisabled: "rgba(0, 0, 0, 0.25)",
          colorTextHeading: "rgba(0, 0, 0, 0.88)",
          colorTextLabel: "rgba(0, 0, 0, 0.65)",
          colorTextDescription: "rgba(0, 0, 0, 0.45)",
          colorTextLightSolid: "#fff",
          colorHighlight: "#ff4d4f",
          colorBgTextHover: "rgba(0, 0, 0, 0.06)",
          colorBgTextActive: "rgba(0, 0, 0, 0.15)",
          colorIcon: "rgba(0, 0, 0, 0.45)",
          colorIconHover: "rgba(0, 0, 0, 0.88)",
          colorErrorOutline: "rgba(255, 38, 5, 0.06)",
          colorWarningOutline: "rgba(255, 215, 5, 0.1)",
          fontSizeIcon: 12,
          lineWidthFocus: 4,
          controlOutlineWidth: 2,
          controlInteractiveSize: 16,
          controlItemBgHover: "rgba(0, 0, 0, 0.04)",
          controlItemBgActive: "#e6f4ff",
          controlItemBgActiveHover: "#bae0ff",
          controlItemBgActiveDisabled: "rgba(0, 0, 0, 0.15)",
          controlTmpOutline: "rgba(0, 0, 0, 0.02)",
          controlOutline: "rgba(5, 145, 255, 0.1)",
          fontWeightStrong: 600,
          opacityLoading: 0.65,
          linkDecoration: "none",
          linkHoverDecoration: "none",
          linkFocusDecoration: "none",
          controlPaddingHorizontal: 12,
          controlPaddingHorizontalSM: 8,
          paddingXXS: 4,
          paddingXS: 8,
          paddingSM: 12,
          padding: 16,
          paddingMD: 20,
          paddingLG: 24,
          paddingXL: 32,
          paddingContentHorizontalLG: 24,
          paddingContentVerticalLG: 16,
          paddingContentHorizontal: 16,
          paddingContentVertical: 12,
          paddingContentHorizontalSM: 16,
          paddingContentVerticalSM: 8,
          marginXXS: 4,
          marginXS: 8,
          marginSM: 12,
          margin: 16,
          marginMD: 20,
          marginLG: 24,
          marginXL: 32,
          marginXXL: 48,
          boxShadow:
            "\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
          boxShadowSecondary:
            "\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
          boxShadowTertiary:
            "\n 0 1px 2px 0 rgba(0, 0, 0, 0.03),\n 0 1px 6px -1px rgba(0, 0, 0, 0.02),\n 0 2px 4px 0 rgba(0, 0, 0, 0.02)\n ",
          screenXS: 480,
          screenXSMin: 480,
          screenXSMax: 575,
          screenSM: 576,
          screenSMMin: 576,
          screenSMMax: 767,
          screenMD: 768,
          screenMDMin: 768,
          screenMDMax: 991,
          screenLG: 992,
          screenLGMin: 992,
          screenLGMax: 1199,
          screenXL: 1200,
          screenXLMin: 1200,
          screenXLMax: 1599,
          screenXXL: 1600,
          screenXXLMin: 1600,
          boxShadowPopoverArrow: "2px 2px 5px rgba(0, 0, 0, 0.05)",
          boxShadowCard:
            "\n 0 1px 2px -2px rgba(0, 0, 0, 0.16),\n 0 3px 6px 0 rgba(0, 0, 0, 0.12),\n 0 5px 12px 4px rgba(0, 0, 0, 0.09)\n ",
          boxShadowDrawerRight:
            "\n -6px 0 16px 0 rgba(0, 0, 0, 0.08),\n -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n -9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ",
          boxShadowDrawerLeft:
            "\n 6px 0 16px 0 rgba(0, 0, 0, 0.08),\n 3px 0 6px -4px rgba(0, 0, 0, 0.12),\n 9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ",
          boxShadowDrawerUp:
            "\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
          boxShadowDrawerDown:
            "\n 0 -6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 -3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 -9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
          boxShadowTabsOverflowLeft: "inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)",
          boxShadowTabsOverflowRight: "inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)",
          boxShadowTabsOverflowTop: "inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)",
          boxShadowTabsOverflowBottom: "inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)",
          _tokenKey: "tr9vsg"
        },
        mode
      };
    }, [mode, themeToken]);

    //dlc 编辑器引擎 提供各种方法service
    const store: EditorEngine = useMemo(() => {
      return new EditorEngine();
    }, []);

    //dlc 国际化
    useEffect(() => {
      store.t = t;
    }, [store, t]);

    //dlc 数据装载
    useEffect(() => {
      const oldMaterials = store.materials;
      const oldMaterialUis = store.materialUis;
      store.materials = [...oldMaterials, ...defaultMaterials, ...(materials || [])];
      store.materialUis = { ...oldMaterialUis, ...materialUis };

      // useEffect 返回一个函数时，这个函数会在组件销毁时执行，用来清除副作用操作，比如取消订阅、清除定时器等。这样可以确保在组件销毁时及时清理副作用，防止内存泄漏和其他问题。
      return () => {
        store.materials = oldMaterials;
        store.materialUis = oldMaterialUis;
      };
    }, [materialUis, materials, store]);

    return (
      <WorkflowEditorStoreContext.Provider value={store}>
        {/* {JSON.stringify(token)} */}
        {/*dlc children -> workFlowEditorInner*/}
        <ThemeProvider theme={theme}>{store && children}</ThemeProvider>
      </WorkflowEditorStoreContext.Provider>
    );
  }
);
